<template>
	<view class="content">
		<view class="menu-block1 block">
			<view class="top">
				最高可借（元）
			</view>
			<view class="bottom">
				<text class="symbol">￥</text><text class="money FZHZGBJ">{{detail.maxMoney}}</text>
			</view>
		</view>
		<view class="menu-block block" v-if="detail.introduction&&detail.introduction!='<p><br></p>'">
			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					对象
				</view>
			</view>
			<view class="info">
				<view :class="{hide:!iSinfo}" style="max-width: 100%;">
					<!-- {{detail.introduction}} -->
					<mp-html :content="detail.introduction" />
				</view>
				<view class="text" @tap="showinfo" v-if="!iSinfo">【查看全部】</view>
			</view>
			<view class="text" @tap="showinfo" v-if="iSinfo">【收起】</view>
		</view>

		<view class="menu-block block" v-if="detail.requirement&&detail.requirement!=='<p><br></p>'">
			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					条件
				</view>
			</view>
			<view class="info">
				<view :class="{hide:!iStrue}" style="max-width: 100%;">
					<!-- {{detail.requirement}} -->
					<mp-html :content="detail.requirement" />
				</view>
				<view class="text" @tap="showTrue" v-if="!iStrue">【查看全部】</view>
			</view>
			<view class="text" @tap="showTrue" v-if="iStrue">【收起】</view>
		</view>
		<view class="menu-block block" v-if="detail.interestRate&&detail.interestRate!='<p><br></p>'">
			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					利率及贴息
				</view>
			</view>
			<view class="info">
				<view :class="{hide:!iStrue1}" style="max-width: 100%;">
					<!-- {{detail.requirement}} -->
					<mp-html :content="detail.interestRate" />
				</view>
				<view class="text" @tap="showTrue1" v-if="!iStrue1">【查看全部】</view>
			</view>
			<view class="text" @tap="showTrue1" v-if="iStrue1">【收起】</view>
		</view>
		<view class="menu-block block" v-if="detail.contactInformation&&detail.contactInformation!=='<p><br></p>'">
			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					办理地址及联系电话
				</view>
			</view>
			<view class="info">
				<view :class="{hide:!iStrue2}" style="max-width: 100%;">
					<!-- {{detail.requirement}} -->
					<mp-html :content="detail.contactInformation" />
				</view>
				<view class="text" @tap="showTrue2" v-if="!iStrue2">【查看全部】</view>
			</view>
			<view class="text" @tap="showTrue2" v-if="iStrue2">【收起】</view>
		</view>
		<view class="menu-block block" v-if="detail.contactInformation&&detail.contactInformation!='<p><br></p>'">
			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					详情
				</view>
			</view>
			<view class="btn-block" style="width: 100%; margin-top: 20rpx;" v-if="id == 9">
				<video style="border-radius: 20rpx;width: 100%;"
					src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/lysp.MP4"></video>
			</view>
			<image v-for="item in photoImageList" style="width: 100%;margin-top: 20rpx;" class="img2"
				@click="preview(item.url)" :src="item.url" mode="widthFix"></image>
		</view>
		<!-- <view class="step" @click="goDetail"> -->
		<!-- 	立即申请
		</view> -->
	</view>
</template>

<script>
	import {
		getLoanInfoById
	} from '@/api/bussiness.js';
	export default {
		data() {
			return {
				id: null,
				iStrue: false,
				iStrue1: false,
				iStrue2: false,
				iSinfo: false,
				detail: {
					maxMoney: 20,
					introduction: '时代创业就业孵化基地提供现代化的办公场所，包括独立办公室、共享工作区、会议室、培训室等，以满足创业者的办公需求。这些场所通常配备品速互联网、通信设施和各种办公设备，如复印机、打印机、投影',
					requirement: '时代创业就业孵化基地提供现代化的办公场所，包括独立办公室、共享工作区、会议室、培训室等，以满足创业者的办公需求。这些场所通常配备品速互联网、通信设施和各种办公设备，如复印机、打印机、投影'
				},
				photoImageList: [{
						id: 1,
						url: "https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/ly1.jpg",
					},
					{
						id: 2,
						url: "https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/ly2.jpg",
					},
				],
			}
		},
		computed: {
			user() {
				return this.$store.getters.user
			}
		},
		methods: {
			preview(photoImage) {
				let imgsArray = [];
				imgsArray[0] = photoImage
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			goDetail() {
				if (this.user) {
					uni.navigateTo({
						url: '/page_other/business_loan/new_bus_loan/bus_list?id=' + this.id
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '需要先登录！',
						cancelText: '先逛逛',
						confirmText: '去登录',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/page_other/login/select'
								})
							} else {}
						}
					})
				}
			},
			navigate1(index) {
				uni.navigateTo({
					url: `/page_other/business_loan/business_loan?id=${this.detail.id}`
				})
			},
			showinfo() {
				this.iSinfo = !this.iSinfo
			},
			showTrue() {
				this.iStrue = !this.iStrue
			},
			showTrue1() {
				this.iStrue1 = !this.iStrue1
			},
			showTrue2() {
				this.iStrue2 = !this.iStrue2
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			getDetail() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getLoanInfoById({
					id: this.id,
				}).then(data => {
					uni.hideLoading()
					this.detail = data
				}).catch(() => {
					uni.hideLoading()
				})
			},
		},
		onLoad(e) {
			
			this.id = e.id
			this.getDetail()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 30rpx;
	}

	.step {
		width: 350rpx;
		height: 100rpx;
		display: flex;
		background-color: #0256FF;
		;
		color: #fff;
		margin: 30rpx auto;
		border-radius: 60rpx;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 120rpx;
		right: 215rpx;
	}

	.menu-block1 {
		background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/dcbj.png') no-repeat center;
		background-size: 100% 100%;
		width: 100%;
		border-radius: 12px;
		padding: 30rpx;
		line-height: 100rpx;

		.top {
			color: #fff;
			font-size: 32rpx;
		}

		.bottom {
			.symbol {
				color: #fff;
				font-size: 32rpx;
			}

			.money {
				color: #fff;
				font-size: 64rpx;
			}
		}
	}

	.menu-block {
		width: 100%;
		margin: 30rpx 0;
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;

		.title-top {
			display: flex;

			.tips {
				width: 18rpx;
				height: 32rpx;
				border-radius: 20rpx;
				background-color: #0256FF;
				margin: 16rpx 12rpx 0 0;
			}

			.title {
				font-weight: 900;
				font-size: 32rpx;
				line-height: 60rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				margin-bottom: 25rpx;
			}

		}

		.data {
			display: flex;
			color: #767676;
			font-size: 30rpx;
			margin-top: 20rpx;
		}

		.info {
			display: flex;
			flex-direction: column;

			view {
				text-align: justify;
				font-size: 28rpx;
				line-height: 60rpx;
				word-break: break-word; //换行模式
				background-color: #fff;
			}

			.text {
				width: 95px;
				font-size: 30rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				color: #1156FF;
				opacity: 1;
			}
		}

		.text {
			width: 95px;
			font-size: 30rpx;
			display: flex;
			justify-content: flex-end;
			align-items: end;
			opacity: 1;
			color: #1156FF;
		}

		.hide {
			overflow: hidden;
			word-break: break-word; //换行模式
			overflow: hidden;
			text-overflow: ellipsis; //修剪文字
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			height: 120rpx;
		}

		.project-content {
			line-height: 60rpx;
		}

		.iphone-content {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.iconfont {
				width: 80rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.play {
					font-size: 28rpx;
					color: #767676;
				}

				.img {
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>